<template >

  <div style=" background-color: #eeeeee" >
    <div style="background-color: white;margin:0 10px;height: 100px">
      <a href="/#/manager/info" style ="float: left; margin-right: 900px">
        <img src="static/img/logo.png" style="width: 246px;height: 89px" >
      </a>
      <div style="float: left;">
        <el-link href="/" v-if="islogtou" target="_blank" style="margin-top: 50px">登陆</el-link>

          <div v-if="islogin" class="block" style="margin-top: 20px;float: left;"><el-avatar :size="30" >{{username}}</el-avatar></div>
          <p style="float: left; margin-left: 10px;margin-top: 25px">{{username}}</p>
      </div>
    </div>
    <div style="height: 615px;background-color: #eeeeee; ">
      <div style="margin-top:10px;width: 60%;height:590px;margin-left: 160px;float: left; background-color: white" >
        <div>
          <div style="display: inline-block;margin-right: 350px;margin-left: 10px;margin-top:10px">
            <div>
              {{filename}}
            </div>
            <div>
              <p style="color: #999999;font-size: 12px">
                过期时间：{{expiredate}}
              </p>
            </div>
          </div>
          <div style="display: inline-block;">
            <el-button  type="primary"><i class="el-icon-upload"></i> 保存到网盘</el-button>
            <el-button><i class="el-icon-download"></i> 下载</el-button>
            <el-button>举报</el-button>
          </div>
        </div>
        <div style= "background-color: #f6f9fd; width: 900px;height: 500px;margin: 10px;text-align: center">
            <i class="el-icon-folder" style="font-size: 80px;margin-top:200px "> </i>
            <p>{{filename}}</p>
        </div>

      </div>
      <!--    <iframe src='https://view.xdocin.com/xdoc?_xdoc=http://119.23.223.87:8080/image/shu.docx'    width="100%"-->
      <!--            height="100%"-->
      <!--            scrolling="auto"-->
      <!--            frameborder='1'>-->
      <!--    </iframe>-->
      <div style="width: 20%;float: left; background-color: white;height: 590px;margin: 10px">
        <div class="demo-basic--circle" style="margin: 100px 100px 10px 100px;">
          <div class="block"><el-avatar :size="80" >{{shareusername}}</el-avatar></div>

        </div>
        <div style="margin: 0 110px 10px 110px">
          <p>{{shareusername}}</p>
        </div>
        <div style="text-align: center">
          <p style="font-size: 16px;color: #999999">{{signature}}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "share",
      data () {
        return {
          username:"",
          shareusername:"",
          signature:"",
          filename:"",
          expiredate:"",
          sharelink:"",
          islogin:false,
          islogtou:true,
          downloadlink:""
        }
      },
      methods:{
          async getShare(){
            var share = await axios(this.ip+"share/getShare?shareid="+this.id)
            if (share.data.expiredate){
              var user = await axios(this.ip+"user/getUser?id="+share.data.userid)
              var expire = share.data.expiredate+7*24*3600*1000-new Date().getTime()
              this.shareusername=user.data.username
              this.signature=user.data.signature
              this.username=localStorage.getItem("username")
              this.filename=share.data.sharelink
              this.downloadlink=share.data.downloadlink
              if (localStorage.getItem("username")){
                this.islogin=true
                this.islogtou=false
              }
              if ((expire/24/3600/1000)>=1){
                this.expiredate= parseFloat(Number(expire/3600/1000/24).toFixed(0))+"天后"
              }else if (expire/3600/1000>=1){
                this.expiredate= parseFloat(Number(expire/3600/1000).toFixed(0))+"小时后"
              }else {
                this.expiredate= parseFloat(Number(expire/3600/1000).toFixed(0))+"分后"
              }
            }else {
              this.filename=share.data
            }




          }
      },
      mounted() {
          this.id=this.$route.query.id
        this.getShare()
      }
    }
</script>

<style scoped>

</style>
